<template>
  <div class="dialog-mask">
    <div class="list-dialog">
      <div class="list-dialog-title">
        <div class="header-title">主体总数</div>
        <div class="close-btn" @click="handleClose">
          <img src="../../assets/home/dialog/dialogClose.png" alt="" />
        </div>
      </div>
      <div class="list-dialog-content">
        <div class="main-body">
          <slot></slot>
        </div>
        <div class="main-bottom">
          <slot name="bottom"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(["close"]);
function handleClose() {
  emit("close");
}
</script>

<style scoped>
.list-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 222;
  width: 67.708333vw;
  height: 32.291667vw;
  background-image: url("../../assets/home/dialog/dialogbody.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: left;
}
.list-dialog .list-dialog-title {
  height: 3vw;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.list-dialog .list-dialog-title .header-title {
  background-image: url("../../assets/home/dialog/dialogheadertitle.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: calc(100% - 5.20833vw);
  height: 2.604167vw;
  padding-left: 1.041667vw;
  line-height: 2.604167vw;
  margin-top: 0.260417vw;
  margin-left: 0.260417vw;
  color: #ffefd8;
  letter-spacing: 0.104167vw;
  text-shadow: 0 0 0.416667vw #54e5fc;
}
.list-dialog .list-dialog-title .close-btn {
  width: 7vw;
  cursor: pointer;
}
.close-btn img {
  width: 100%;
}

.list-dialog .list-dialog-content {
  height: calc(100% - 3vw);
  width: 100%;
  padding: 0.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.list-dialog-content .main-body {
  flex: 0 0 90%;
  overflow: auto;
  padding-left: 1vw;
  overflow-y: auto;
}

/* 设置滚动条的宽度和轨道背景 */
.main-body::-webkit-scrollbar {
  width: 6px;
}

/* 设置滚动条轨道的样式 */
.main-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

/* 设置滚动条滑块的样式 */
.main-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  transition: 0.3s;
}

/* 鼠标悬停时滑块的样式 */
.main-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

.item {
  flex: 1 0 30%; /* 重要：项目基础尺寸为30%，允许增长但不允许缩小 */
  box-sizing: border-box;
  margin-bottom: 10px; /* 可选：添加底部边距以分隔行 */
  min-width: 0; /* 确保即使内容过多也能保持布局 */
}

.list-dialog-content .main-bottom {
  flex: 0 0 10%;
  display: flex;
  padding-left: 1vw;
  align-items: center;
}

.dialog-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>
